<template>
	<view>
		<view>
		<navTop title="更多信息" :isHeight="false" hasBgc="white" :color="navtop.color" :isBack="true"></navTop>
		</view>
		<view class="messageCard">
			<messageCard
				v-for="(item,index) in msgs" 
				:key="index"
				:msg="item.msg"
				:created="item.created">
			</messageCard>
		</view>
		<view class="allDeleteBorder">
			<image class="allDeleteImg" src="https://img01-xusong.91q.com/86DDACE2-C651-4074-85E5-6D8FD4F7D729.png"></image>
			<view class="allDeleteText" @click="deleteAll()">全部删除</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import navTop from '../../components/navTop.vue'
	import messageCard from '../../components/messageCard.vue'
	export default {
		components: {
			navTop,
			messageCard
		},
		data(){
			return{
				navtop: {
					title: 'XXX',
					color: '#000000'
				},
				user_Id:this.$store.state.userInfo.id,
				msgs:[],
				len:1,
			}
		},
		methods:{
			getList() {
				//判断状态
				if(this.$store.state.hasLogin){
					let that= this
					let userId = this.user_Id
					uni.request({
						url: "https://www.codingyt.com/club/message/select",
						method: 'get',
						data:{
							userId
						},
						dataType: 'json',
						success: (res) => {
							
							that.msgs = res.data.data;
							this.len = this.msgs.length
						},
					});
				}
			
				
			},
			deleteAll(){
				let userId = this.user_Id
				uni.showModal({
					content:'你确定要删除吗?',
					success() {
						uni.request({
							
							url:'https://www.codingyt.com/club/message/deleteByUserId',
							data:{
								"userId":userId
							},
							success(res) {
								uni.navigateTo({
									url:'./message'
								})
							},
						})
					},
				})
				
			},
		},
	
		onLoad() {
			this.getList();
		},
	}
</script>

<style>
	.messageCard{
		top: 200rpx;
		left: 66rpx;
		position: absolute;
	}
	.allDeleteBorder{
		left: 424rpx;
		top: 1468rpx;
		width: 274rpx;
		height: 84rpx;
		border-radius: 62rpx;
		background-color: rgba(249, 193, 110, 100);
		color: rgba(255, 255, 255, 100);
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.4);
		position: fixed;
	}
	.allDeleteImg{
		left: 38rpx;
		top: 20rpx;
		width: 43rpx;
		height: 43rpx;
		position: absolute;
	}
	.allDeleteText{
		left: 100rpx;
		top: 20rpx;
		width: 142rpx;
		height: 48rpx;
		color: rgba(255, 255, 255, 100);
		font-size: 32rpx;
		text-align: left;
		  ;
		position: absolute;
	}
</style>
